<template>
    <div class="adminsSystem">
        <el-table :data="adminsData">
            <el-table-column label="管理员姓名" width="200">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.account }}</el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="管理员状态" width="200">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium" v-if="scope.row.state == 1"
                            >正常</el-tag
                        >
                        <el-tag size="medium" v-else>已禁用</el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="管理员身份" width="200">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-tag
                            size="medium"
                            :class="[scope.row.power == 1 ? 'green' : 'blue']"
                            >{{
                                scope.row.power == 1
                                    ? "超级管理员"
                                    : "普通管理员"
                            }}</el-tag
                        >
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="联系方式" width="200">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.phone }}</el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="500">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        round
                        icon="el-icon-edit"
                        @click="modifyAdminsBut(scope.row._id)"
                        >修改</el-button
                    >
                    <el-button
                        v-if="scope.row.power == 2"
                        size="mini"
                        round
                        type="danger"
                        icon="el-icon-delete"
                        @click="adminsDeleteBut(scope.row._id)"
                        >删除</el-button
                    >
                    <el-button
                        v-if="scope.row.state == 1 && scope.row.power == 2"
                        size="mini"
                        type="danger"
                        round
                        @click="
                            forbidAdminsBut({
                                _id: scope.row._id,
                                state: scope.row.state,
                            })
                        "
                        >{{ "禁用" }}</el-button
                    >
                    <el-button
                        v-else-if="scope.row.state == 2 && scope.row.power == 2"
                        size="mini"
                        type="success"
                        round
                        @click="
                            forbidAdminsBut({
                                _id: scope.row._id,
                                state: scope.row.state,
                            })
                        "
                        >{{ "启用" }}</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="seekAdminData.currentPage"
                :page-sizes="[4, 6, 8, 10]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="seekAdminData.total"
            >
            </el-pagination>
            <span @click="dataTotal">显示所有</span>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

const {
    mapState: adminsMapState,
    mapMutations: adminsMapMutations,
    mapActions: adminsMapActions,
} = createNamespacedHelpers("admins");

export default {
    data() {
        return {};
    },
    mounted() {
        //  this.getAdmins();
        this.seekAdmins();
    },
    computed: {
        ...adminsMapState(["adminsData", "seekAdminData"]),
    },
    methods: {
        ...adminsMapMutations([
            "changePageSizeLc",
            "changeCurrentPageLc",
            "changeSeekAdminData",
        ]),
        ...adminsMapActions([
            "getAdmins",
            "deleteAdmins",
            "forbidAdmins",
            "seekAdmins",
        ]),
        //删除管理员
        adminsDeleteBut(_id) {
            this.deleteAdmins(_id);
            this.getAdmins();
        },

        //禁用管理员
        forbidAdminsBut(data) {
            this.forbidAdmins(data);
            this.seekAdmins();
        },

        //修改管理员
        modifyAdminsBut(_id) {
            this.$router.push("/System/modifyAdmins/" + _id);
        },

        //每页条数
        handleSizeChange(val) {
            this.changePageSizeLc(val);
            this.seekAdmins();
        },
        // 当前页
        handleCurrentChange(val) {
            this.changeCurrentPageLc(val);
            this.seekAdmins();
        },
        //显示所有数据
        dataTotal() {
            this.changeSeekAdminData({ status: "", value: "", type: "" });
            this.seekAdmins();
        },
    },
};
</script>
<style lang="scss">
.adminsSystem {
    width: 100%;
    .cell {
        width: 100%;
        text-align: center;
    }
    .green {
        background-color: lightgreen;
    }
    .blue {
        background-color: lightblue;
    }
    .block {
        display: flex;
        > span {
            font-size: 13px;
            color: gray;
            margin-left: 5px;
            cursor: pointer;
        }
    }
}
</style>